<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>音乐盒</title>
        <style>
            body { overflow: visible;}
            .container { text-align: center; }
            .container>header,
            .container>footer { height: 50vh; }
            .container>div { margin: 15px; height: 50px; line-height: 50px; }
        </style>
    </head>
    <body>
        <div class="container lyrics">
            <header></header>
            <div data-time="0">传奇 - 王菲</div>
            <div data-time="14">作词：刘兵</div>
            <div data-time="22">作曲：李健</div>
            <div data-time="30">只是因为在人群中</div>
            <div data-time="39">多看了你一眼</div>
            <div data-time="00">梦想着偶然能有一天再相见</div>
            <div data-time="00">从此我开始孤单思念</div>
            <div data-time="00">再也没能忘掉你容颜</div>
            <div data-time="00">想你时你在天边</div>
            <div data-time="00">想你时你在眼前</div>
            <div data-time="00">想你时你在脑海</div>
            <div data-time="00">想你时你在心田</div>
            <div data-time="00">宁愿相信我们前世有约</div>
            <div data-time="00">今生的爱情故事不会再改变</div>
            <div data-time="00">宁愿用这一生等你发现</div>
            <div data-time="00">我一直在你身旁从未走远</div>
            <div data-time="00">只是因为在人群中</div>
            <div data-time="00">多看了你一眼</div>
            <div data-time="00">再也没能忘掉你容颜</div>
            <div data-time="00">梦想着偶然能有一天再相见</div>
            <div data-time="00">从此我开始孤单思念</div>
            <div data-time="00">想你时你在天边</div>
            <div data-time="00">想你时你在眼前</div>
            <div data-time="00">想你时你在脑海</div>
            <div data-time="00">想你时你在心田</div>
            <div data-time="00">宁愿相信我们前世有约</div>
            <div data-time="00">今生的爱情故事不会再改变</div>
            <div data-time="00">宁愿用这一生等你发现</div>
            <div data-time="00">我一直在你身旁从未走远</div>
            <div data-time="00">宁愿相信我们前世有约</div>
            <div data-time="00">今生的爱情故事不会再改变</div>
            <div data-time="00">宁愿用这一生等你发现</div>
            <div data-time="00">我一直在你身旁从未走远</div>
            <div data-time="00">只是因为在人群中</div>
            <div data-time="00">多看了你一眼</div>
            <footer></footer>
        </div>
        <script>
            (function(){

                const body = document.body;
                // HTMLElement.prototype.offsetHeight 获得元素高度(包括边框、内边距、内容)
                console.log( body.offsetHeight );
                // Element.prototype.scrollHeight 获得元素高度(包括内边距和内容区域)
                console.log( body.scrollHeight );

                const total = body.offsetHeight;

                let yOffset = 0;

                let scroll = function(){
                    scrollTo(0, ++yOffset);
                    if( yOffset < total ) {
                        // 在经历指定时间后才调用 scroll 函数
                        setTimeout( scroll , 20 );
                    }
                }

                let handler = evt => {
                    scroll();
                    // audio.play()
                }

                const options = {
                    capture: false,
                    once: true
                }
                window.addEventListener('click', handler, options);
                window.addEventListener('dblclick', handler, options);
                window.addEventListener('mousemove', handler, options);
            })();
        </script>
    </body>
</html>